<template id="Red_coupon">
    <div class="try_m_Q">
        <!--新增的红包页面-->
        <div class="Red_coupon_m">
            <div class="Red_coupon_1" @click="getDetails()">
                <img src="../image/blue_da.png" alt="">
                <h4>红包</h4>
            </div>
            <div class="Red_coupon_2">
                <span>你有<time>{{num}}</time>个红包即将到期</span>
                <span>优惠说明</span>
                <img src="../image/wen.png" alt="">
            </div>
            <div class="Red_coupon_3"  v-for="(item, index) in items">
                <div class="Red_coupon_4">
                    <p>{{item.title}}</p>
                    <p>{{item.tips}}</p>
                    <p>{{item.member_tips}}</p>
                    <p>{{item.scope_tips}}</p>
                    <p>{{item.stat_tips}}</p>
                    <p>有效期至:{{item.time}}</p>
                    <p>¥{{item.face_value}}</p>
                    <img v-if="item.stat == 0" src="../image/guoqi.jpg" alt="">
                </div>
            </div>
            <!--<div class="Red_coupon_yao" v-if="items.length>0">
                   <span>去使用</span>
                   <span>邀请得好礼</span>
            </div>-->
        </div>

    </div>
</template>
<script>
    export default{
        name: 'QR_code',
        data(){
            return{
                mode:'get_user_coupon',
                items:[],
                num: 0,
            }
        },
        filters: {
            formatMoney(money) {
                return parseInt(money);
            }
        },
        mounted:function () {
            let H=$(window).height();
            $('.try_m_Q').height(H);

            //初始化
            this.getItems(this.mode);

        },
        methods:{
            get_qu:function(){
                window.history.go(-1);
            },
            formatDateTime(time) {
                var date = new Date(parseInt(time) * 1000);
                return this.GLOBAL.formatDate(date, 'yyyy-MM-dd hh:mm');
            },
            getItems:function(mode){

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode='+mode;
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.items = temp.data;
                        this.num   = temp.data.length;
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }                 
                 })

            },
            getDetails:function(){
                window.history.go(-1);
            }
        },

    };

</script>
<style>
    .Red_coupon_yao{
        width:100%;
        height:0.62rem;
        position:relative;
        padding-top:0.18rem;

    }
    .Red_coupon_yao span:nth-of-type(2){
        width:1.6rem;
        height:0.5rem;
        line-height:0.5rem;
        text-align:center;
        color:#fc1dac;
        font-size:0.24rem;
        display:inline-block;
        border:0.01rem solid #fc1dac;
        right:0.2rem;
        top:0.18rem;
        position:absolute;
    }
    .Red_coupon_yao span:nth-of-type(1){
        width:1.6rem;
        height:0.5rem;
        line-height:0.5rem;
        display:inline-block;
        text-align:center;
        color:#7f7f7f;
        font-size:0.24rem;
        position:absolute;
        top:0.18rem;
        left:2.77rem;
        border:0.01rem solid #b9b9b9;
    }
    /*1*/
    .try_m_Q{
        background:#f5f4f2;
    }
    .Red_coupon_m{
        background:#f5f4f2;
    }
    /*8*/
   /* .red_4 span{
        display:block;
        position:absolute;
        height:0.35rem;
        width:0.35rem;
        border-radius:50%;
        border:0.01rem solid #e5e5e5;
        top:1.1rem;
        right:0.2rem;
    }
    .red_4 span.selected{
        background-color: #2eaffc;
    }*/
    .Red_coupon_4 img{
        display:block;
        position:absolute;
        height:0.88rem;
        width:0.88rem;
        top:0.2rem;
        right:0.3rem;
    }
    .Red_coupon_4 p:nth-of-type(7){
        height:0.84rem;
        line-height:0.84rem;
        color:#fc1dac;
        font-size:0.6rem;
        position:absolute;
        top:0.64rem;
        left:0.3rem;
    }
    .Red_coupon_4 p:nth-of-type(6){
        width:5.48rem;
        height:0.54rem;
        line-height:0.54rem;
        color:#dcdcdc;
        font-size:0.2rem;
        margin-left:0.32rem;
        position:absolute;
        top:2.08rem;
        border-top:0.01rem dashed #e3e3e3;
    }
    .Red_coupon_4 p:nth-of-type(5){
        line-height:0.4em;
        text-indent: 1.82rem;
        color:#fd70c2;
        font-size:0.22rem;
        height:0.4rem;
        position:absolute;
        top:0.23rem;
        right:0.35rem;
    }
    .Red_coupon_4 p:nth-of-type(2){
        height:0.4rem;
        line-height:0.4em;
        text-indent: 1.82rem;
        color:#d1d1d1;
        font-size:0.22rem;
    }
    .Red_coupon_4 p:nth-of-type(3){
        height:0.4rem;
        line-height:0.4em;
        text-indent: 1.82rem;
        color:#d1d1d1;
        font-size:0.22rem;
    }
    .Red_coupon_4 p:nth-of-type(4){
        height:0.4rem;
        line-height:0.4em;
        text-indent: 1.82rem;
        color:#d1d1d1;
        font-size:0.22rem;
    }
    .Red_coupon_4 p:nth-of-type(1){
        height:0.4rem;
        line-height:0.4em;
        text-indent: 1.82rem;
        color:#323232;
        font-size:0.22rem;
    }
    .Red_coupon_4{
        width:6rem;
        height:2.2rem;
        background:#ffffff;
        margin:auto;
        border-radius:0.1rem;
        padding-top:0.4rem;
        position:relative;
        margin-bottom:0.1rem;
    }
    /*4*/
    .Red_coupon_3{
        width:100%;
        min-height:3rem;
        background:#f5f4f2;
    }
    /*3*/
    .Red_coupon_2{
        width:100%;
        height:0.82rem;
        position:relative;
        background:#f5f4f2;
    }
    .Red_coupon_2 img{
        display:block;
        height:0.3rem;
        width:0.3rem;
        position:absolute;
        top:0.25rem;
        right:0.14rem;
    }
    .Red_coupon_2 span:nth-of-type(1){
        line-height:0.82rem;
        color:#808080;
        font-size:0.24rem;
       margin-left: 0.2rem;
        display:block;
        float:left;
    }
    .Red_coupon_2 span:nth-of-type(1) time{
        color:#fc1dac;
    }
    .Red_coupon_2 span:nth-of-type(2){
        line-height:0.82rem;
        color:#808080;
        font-size:0.24rem;
        display:block;
        float:right;
        margin-right:0.46rem;
    }
    /*2*/
    .Red_coupon_1 h4{
        height:0.8rem;
        color:#2eaffc;
        font-size:0.28rem;
        line-height:0.8rem;
        text-align:center;
        font-weight:normal;
    }
    .Red_coupon_1{
        height:0.8rem;
        width:100%;
       /* border-bottom:0.1rem solid #f5f4f2;*/
        position:relative;
        background:#ffffff;
    }
    .Red_coupon_1 img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
</style>
